<!--
 * relative     : \src\components\selector\roleSelector.vue
 * Author       : 郭鹏超
 * Date         : 2025-02-08 08:56
 * LastEditors  : 郭鹏超
 * LastEditTime : 2025-03-06 18:39
 * Description  : 角色组件
 * CodeIterationRecord: 
 -->
<template>
  <el-select class="w-150px" v-model="roleID" placeholder="" @change="emitSelectOption" :clearable="false">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script setup lang="ts">
const { commonDictionaryStore } = useStore();
const { roleOptions } = defineProps<{ roleOptions?: SelectOptionsView[] }>();
const roleID = defineModel({
  type: Number,
  default: 999999
});
commonDictionaryStore.fetchDataIfNeeded("roles", systemDictionaryService.getRoleSelectOptions, { isHiddenFlag: false });
/**
 * @description:组装下拉框选项
 * @param computed
 * @return
 */
const options = computed(() => {
  // 初始选项单独定义
  const initialOptions: SelectOptionsView[] = [{ label: "全部角色", value: 999999 }];
  // 合并数据源时处理可能的 undefined 情况
  let dataSource = (roleOptions ?? []).length > 0 ? roleOptions ?? [] : commonDictionaryStore?.roles ?? [];
  dataSource.some((item) => item.value == 999999) && (dataSource = commonDictionaryStore?.roles ?? []);

  return [...initialOptions, ...dataSource];
});
const emit = defineEmits(["select"]);
/**
 * @description: 选中内容事件发射
 */
const emitSelectOption = () => {
  emit(
    "select",
    options.value.find((item: SelectOptionsView) => item.value == roleID.value)
  );
};
</script>
